<template>
  <view class="usersetupinfo">
    <statusBar></statusBar>
    <uni-nav-bar left-icon="back" title="个人资料"></uni-nav-bar>
    <view style="height:10px;background-color: #f2f2f2;"></view>
    <view class="setuplist setuplisttouxiang" @click="changeTouxiang">
      头像
      <view class="setuplist-right">
        <image :src="userInfo.Avatar" mode=""></image>
      </view>
    </view>
    <view class="setuplist" @click="goUserName">
      用户名
      <text class="setuplist-right">{{userInfo.UserName}}</text>
    </view>  
    <view class="setuplist" @click="changeSex">
      性别
      <text class="setuplist-right">{{sex}}</text>
    </view>

    <popup-layer ref="popup" :direction="direction">
      <view class="popupsex" @click="choiceMan">男</view>
      <view class="popupsex" @click="choiceWoman">女</view>
    </popup-layer>
    <uni-popup :show="type === 'middle'" position="middle" mode="fixed" :msg="msg" @hidePopup="togglePopup('')"></uni-popup>
  </view>
</template>

<script>
import popupLayer from '@/components/popup-layer/popup-layer.vue';
import statusBar from "@/components/status-bar.vue"
export default {
  components: {
    popupLayer,
    statusBar
  },
  data() {
    return {
      direction: 'top',
      userInfo: [],
      sex: '',
      type: '',
    };
  },
  created() {
  	this.getUserInfo();
  },
  methods: {
    getUserInfo: function(){
      uni.request({
        method: 'GET',
        header: {
          'Content-Type': 'application/json',
          'Authorization': uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/student/personal/GetUserInfo', 
        data: {},
        success: res => {
          //console.log(res);
          if(res.statusCode == 200){
             this.userInfo = res.data.data;
             this.userInfo.Avatar = this.apiUrl + this.userInfo.Avatar; 
             this.userInfo.Avatar = this.userInfo.Avatar.replace(/\\/g,'\/');
             if (res.data.data.Sex == '0') {
                this.sex = '男';
              } else {
                this.sex = '女';
              }
          }else{
            this.msg = '未知错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    choiceMan: function(){
      uni.request({
        method: 'POST',
        header: {
          'Content-Type': 'application/json',
          'Authorization': uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/student/personal/SubmitUser', 
        data: {
          UserName: this.userInfo.UserName,
          Description: this.userInfo.Description,
          Sex: '0',
          Birthday: this.userInfo.Birthday,
        },
        success: res => {
          console.log(res);
          if(res.statusCode == 200){
            this.$refs.popup.close();
            this.msg = '修改成功';
            this.togglePopup('middle');
            this.sex = '男';
          }else{
            this.msg = '未知错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    choiceWoman: function(){
      uni.request({
        method: 'POST',
        header: {
          'Content-Type': 'application/json',
          'Authorization': uni.getStorageSync('token')
        },
        url: this.apiUrl + 'api/student/personal/SubmitUser', 
        data: {
          UserName: this.userInfo.UserName,
          Description: this.userInfo.Description,
          Sex: '1',
          Birthday: this.userInfo.Birthday,
        },
        success: res => {
          console.log(res);
          if(res.statusCode == 200){
            this.$refs.popup.close();
            this.msg = '修改成功';
            this.togglePopup('middle');
             this.sex = '女';
          }else{
            this.msg = '未知错误';
            this.togglePopup('middle');
          }
        }
      });
    },
    changeSex: function(){
      this.$refs.popup.show() // 弹出
    },
    changeTouxiang: function() {
      var vm = this;
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function(res) {
          uni.uploadFile({
            header: {
              'Authorization': uni.getStorageSync('token')
            },
            url: vm.apiUrl + 'api/student/personal/SubmitAvatar', 
            filePath: res.tempFilePaths[0],
            name: 'file',
            formData: {
                
            },
            success: (uploadFileRes) => {
              var headUrl = JSON.parse(uploadFileRes.data);
              console.log(headUrl.data);
              vm.userInfo.Avatar = vm.apiUrl + headUrl.data;
              vm.userInfo.Avatar = vm.userInfo.Avatar.replace(/\\/g,'\/');
            }
        });
        }
      });
    },
    goUserName: function(){
      uni.navigateTo({
      	url: 'usersetupname',
      })
    },
    goPhone: function(){
      uni.navigateTo({
      	url: 'usersetupphone?phone=' + this.userInfo.Phone,
      })
    },
  }
};
</script>

<style scoped>
.line {
  height: 15upx;
}

.setuplist {
  padding-left: 25upx;
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  color: #474747;
  background-color: #ffffff;
  margin-bottom: 10upx;
}
.setuplisttouxiang {
  line-height: 200upx;
  height: 200upx;
}
.setuplisttouxiang .setuplist-right{
    height: 200upx;
}
.setuplist image {
  width: 120upx;
  height: 120upx;
  border-radius: 50px;
  position: absolute;
  right: -2px;
  top: 20px;
}
.setuplist-right {
  font-size: 13px;
  color: #333333;
  float: right;
  margin-right: 65upx;
  position: relative;
}
.setuplist-right::after {
  border: solid 2px #c8c8cd;
  border-bottom-width: 0;
  border-left-width: 0;
  content: ' ';
  top: 50%;
  right: -15px;
  position: absolute;
  width: 5px;
  height: 5px;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}

.popupsex{
  height: 80upx;
  line-height: 80upx;
  display: flex;
  justify-content: center;
}
.popupsex:nth-child(2n){
  border-top: 1upx solid #F2F2F2;
}
</style>
